<template>
  <div class="matrix_details">
    <el-container class="base_details_container">
      <BackTitleView :title="title" />
      <el-main>
        <div class="base_details_content">
          <div class="content">
            <div class="base_details_title">基本信息</div>
            <div class="base_details_content_second">
              <el-form
                ref="formRef"
                :model="form"
                :rules="rules"
                :disabled="readOnly"
                label-width="100px"
                class="base_details_form"
              >
                <el-form-item label="基地名称" prop="name">
                  <el-input v-model="form.name" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="基地级别" prop="shopLevel">
                  <el-radio-group v-model="form.shopLevel">
                    <el-radio label="1040001">总店</el-radio>
                    <el-radio label="1040002">分店</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="基地地址" prop="address">
                  <div>
                    <el-input v-model="form.address" placeholder="请输入" />
                    <MapSelectAddress
                      class="selectMap"
                      :position="[form.lng, form.lat]"
                      @select="selectAddress"
                      :disabled="readOnly"
                    />
                  </div>
                </el-form-item>
                <el-form-item label="基地封面" prop="picList">
                  <UploadPicture
                    v-model="form.picList"
                    :limit="3"
                    :disabled="readOnly"
                    :fileSize="$.imgFileSize()"
                  />
                </el-form-item>
                 <el-form-item label="基地视频" prop="videoList">
                      <UploadVideo v-model="form.videoList" :limit="1" :fileSize="$.videoFileSize()"
                        :disabled="readOnly" />
                    </el-form-item>
                <el-form-item label="基地简介" prop="descList">
                  <UploadPicture
                    v-model="form.descList"
                    :limit="50"
                    :disabled="readOnly"
                    :fileSize="$.imgFileSize()"
                  />
                </el-form-item>
              </el-form>
            </div>
            <div class="base_details_title">法人信息</div>
            <div class="base_details_content_second">
              <el-form
                ref="formRef"
                :model="form"
                :rules="rules"
                :disabled="readOnly"
                label-width="100px"
                class="base_details_form"
              >
                <el-form-item label="法人身份证" prop="identityCardImg">
                  <UploadSinglePicture
                    v-model="form.identityCardImg"
                    :disabled="readOnly"
                    :width="120"
                    :fileSize="$.imgFileSize()"
                  />
                </el-form-item>
                <el-form-item label="营业执照" prop="businessLicenseImg">
                  <UploadSinglePicture
                    v-model="form.businessLicenseImg"
                    :disabled="readOnly"
                    :width="120"
                    :fileSize="$.imgFileSize()"
                  />
                </el-form-item>
                <el-form-item label="经营许可证" prop="businessCertificateImg">
                  <UploadSinglePicture
                    v-model="form.businessCertificateImg"
                    :disabled="readOnly"
                    :width="120"
                    :fileSize="$.imgFileSize()"
                  />
                </el-form-item>
                <el-form-item label="开户行信息" prop="bankAccountImg">
                  <UploadSinglePicture
                    v-model="form.bankAccountImg"
                    :disabled="readOnly"
                    :width="120"
                    :fileSize="$.imgFileSize()"
                  />
                </el-form-item>
              </el-form>
            </div>
            <div class="base_details_title">售后信息</div>
            <div class="base_details_content_second">
              <el-form
                ref="formRef"
                :model="form"
                :rules="rules"
                :disabled="readOnly"
                label-width="100px"
                class="base_details_form"
              >
                <el-form-item label="收货人姓名" prop="returnRecipientName">
                  <el-input v-model="form.returnRecipientName" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="收货人电话" prop="returnPhoneNumber">
                  <el-input v-model="form.returnPhoneNumber" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="收货地址" prop="returnAddress">
                  <el-input v-model="form.returnAddress" placeholder="请输入" />
                </el-form-item>
              </el-form>
            </div>
          </div>
        </div>
      </el-main>
      <el-footer v-show="!readOnly">
        <el-button @click="back">取消</el-button>
        <el-button @click="checkForm" type="primary">保存</el-button>
      </el-footer>
    </el-container>
  </div>
</template>

<script setup>
import UploadVideo from "@com/upload/UploadVideo.vue"
import BackTitleView from "@com/BackTitleView.vue";
import UploadSinglePicture from "@com/upload/UploadSinglePicture.vue";
import UploadPicture from "@com/upload/UploadPicture.vue";
import MapSelectAddress from "@com/MapSelectAddress.vue";
import { ref, reactive } from "vue";
import $ from "@util/base";
import { $msg } from "@ui/msg";
import useRoute from "@util/router";
import api from "@api/base";

const route = useRoute();

const urlQuery = route.query();
var readOnly = false;
var title = "基地详情";
$.handleCRU(urlQuery.type, {
  show: () => {
    readOnly = true;
    title = "基地详情";
    getData();
  },
  add: () => {
    title = "新增基地";
  },
  modify: () => {
    title = "修改基地";
    getData();
  },
});

function getData() {
  api.details(route.query().code, (val) => {
    form.value = val;
  });
}

const formRef = ref("");

const form = ref({
  name: "",
  address: "",
  shopLevel:null,
  picList: [],
  descList: [],
  lat: null,
  lng: null,
  identityCardImg: "",
  businessLicenseImg: "",
  businessCertificateImg: "",
  bankAccountImg: "",
  returnRecipientName: "",
  returnPhoneNumber: "",
  returnAddress: ""
});

const rules = {
  name: [
    {
      required: true,
      message: "请输入基地名称",
      trigger: "blur",
    },
  ],
  shopLevel:[
    {
      required: true,
      message: "请选择基地级别",
      trigger: "blur",
    },
  ],
  address: [
    {
      required: true,
      message: "请输入基地地址",
      trigger: "blur",
    },
  ],
  picList: [
    {
      required: true,
      type: "array",
      message: "请上传基地封面",
      trigger: "change",
    },
  ],
  descList: [
    {
      required: true,
      type: "array",
      message: "请上传基地简介",
      trigger: "change",
    },
  ],
  identityCardImg: [
    {
      required: true,
      message: "请上传法人身份证",
      trigger: "blur",
    },
  ],
  businessLicenseImg: [
    {
      required: true,
      message: "请上传营业执照",
      trigger: "blur",
    },
  ],
  businessCertificateImg: [
    {
      required: true,
      message: "请上传经营许可证",
      trigger: "blur",
    },
  ],
  bankAccountImg: [
    {
      required: true,
      message: "请上传开户行信息",
      trigger: "blur",
    },
  ],
  returnRecipientName: [
    {
      required: true,
      message: "请输入收货人姓名",
      trigger: "blur",
    },
  ],
  returnPhoneNumber: [
    {
      required: true,
      message: "请输入收货人电话",
      trigger: "blur",
    },
  ],
  returnAddress: [
    {
      required: true,
      message: "请输入收货地址",
      trigger: "blur",
    },
  ],
};

function selectAddress(data) {
  form.value.address = data.address;
  form.value.lat = data.lat + "";
  form.value.lng = data.lng + "";
}

const checkForm = () => {
  if (!formRef.value) return;
  formRef.value.validate((valid) => {
    if (valid) {
      $.handleCRU(route.query().type, {
        add: () => {
          addData();
        },
        modify: () => {
          modifyData();
        },
      });
    } else {
      return false;
    }
  });
};

function addData() {
  api.add(form.value, () => {
    $msg.succ("添加成功");
    back();
  });
}
function modifyData() {
  api.update(route.query().code, form.value, () => {
    $msg.succ("修改成功");
    back();
  });
}

function back() {
  route.go(-1);
}
</script>

<style lang="scss">
.matrix_details {
  height: 100%;

  .table_tag_box {
    text-align: left;

    .el-tag {
      margin-right: 10px;
    }
  }

  .selectMap {
    margin-top: 20px;
  }
}
</style>
